<template>
  <!-- 动态网格背景 -->
  <div class="bg-canvas">
    <canvas id="gridCanvas"></canvas>
  </div>

  <!-- 前景内容 -->
  <section class="about-page">
    <div class="glass-wrapper">
      <!-- 1. 头部 -->
      <h2>关于 Vue 商城</h2>
      <p class="subtitle">致力于为用户提供最优质的购物体验和服务</p>

      <!-- 2. 核心数据 -->
      <el-row :gutter="40" class="data-row">
        <el-col :xs="24" :sm="8">
          <div class="data-card">
            <div class="number">10W+</div>
            <div class="label">注册用户</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="8">
          <div class="data-card">
            <div class="number">5,000+</div>
            <div class="label">精选商品</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="8">
          <div class="data-card">
            <div class="number">99%</div>
            <div class="label">用户满意度</div>
          </div>
        </el-col>
      </el-row>

      <el-divider class="divider-light" />

      <!-- 3. 我们的故事 -->
      <div class="story">
        <h3>我们的故事</h3>
        <p>
          Vue 商城成立于 2025年，是一家专注于为用户提供高品质购物体验的电商平台。
          我们相信技术能够改变生活，让购物变得更加简单、便捷和愉悦。
        </p>
        <p>
          从最初的想法到今天的规模，我们始终秉承“用户至上，品质第一”的经营理念，
          致力于为每一位用户提供最优质的产品和服务。通过不断的技术创新和服务优化，
          我们已经成为用户信赖的购物首选平台，并将继续为创造更美好的购物体验而努力。
        </p>
      </div>

      <el-divider class="divider-light" />

      <!-- 4. 价值观 -->
      <div class="values">
        <h3>我们的价值观</h3>
        <el-row :gutter="40">
          <el-col :xs="24" :sm="12">
            <div class="value-card glass-card">
              <div class="icon">👑</div>
              <div class="title">用户至上</div>
              <div class="desc">
                始终将用户需求放在第一位，持续改善用户体验，创造真正的价值。
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12">
            <div class="value-card glass-card">
              <div class="icon">🛡️</div>
              <div class="title">品质承诺</div>
              <div class="desc">
                严格把控商品质量，只为用户提供经过精心挑选的优质产品。
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-divider class="divider-light" />

      <!-- 5. 核心团队 -->
      <div class="team">
        <h3>核心团队</h3>
        <el-row :gutter="40">
          <el-col :xs="24" :sm="8">
            <div class="member glass-card">
              <el-avatar :size="80" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              <div class="name">热合木吐拉</div>
              <div class="role">创始人 & CEO</div>
              <div class="intro">10 年电商行业经验，专注于用户体验和商业模式创新。</div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8">
            <div class="member glass-card">
              <el-avatar :size="80" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              <div class="name">迪力亚尔</div>
              <div class="role">技术总监</div>
              <div class="intro">资深全栈工程师，负责平台技术架构和产品开发。</div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8">
            <div class="member glass-card">
              <el-avatar :size="80" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              <div class="name">巴合加娜尔</div>
              <div class="role">运营总监</div>
              <div class="intro">丰富的电商运营经验，擅长用户增长和市场推广策略。</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-divider class="divider-light" />

      <!-- 6. 发展历程 -->
      <div class="timeline">
        <h3>发展历程</h3>
        <el-timeline>
          <el-timeline-item timestamp="2023-01" placement="top">
            <el-card shadow="hover" class="glass-card">
              <div class="tl-title">平台创立</div>
              <div class="tl-content">Vue 商城正式成立，开始搭建核心技术团队。</div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2023-06" placement="top">
            <el-card shadow="hover" class="glass-card">
              <div class="tl-title">产品上线</div>
              <div class="tl-content">平台正式上线，推出首批精选商品类目。</div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2023-12" placement="top">
            <el-card shadow="hover" class="glass-card">
              <div class="tl-title">用户突破</div>
              <div class="tl-content">注册用户突破 10 万，月活跃用户持续增长。</div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <el-divider class="divider-light" />

      <!-- 7. 联系我们 -->
      <div class="contact">
        <h3>联系我们</h3>
        <el-row :gutter="40">
          <el-col :xs="24" :sm="12">
            <div class="contact-card glass-card">
              <div class="way">
                <el-icon><Phone /></el-icon>
                <span>客服热线：400-888-9999</span>
              </div>
              <div class="way">
                <el-icon><Message /></el-icon>
                <span>邮箱：contact@vueshop.com</span>
              </div>
              <div class="way">
                <el-icon><Location /></el-icon>
                <span>地址：新疆医科大学</span>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12">
            <div class="feedback glass-card">
              <el-form :model="form" label-width="70px">
                <el-form-item label="姓名">
                  <el-input v-model="form.name" placeholder="您的姓名" />
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="form.email" placeholder="邮箱地址" />
                </el-form-item>
                <el-form-item label="留言">
                  <el-input
                    v-model="form.msg"
                    type="textarea"
                    :rows="3"
                    placeholder="留言内容"
                  />
                </el-form-item>
                <el-button type="primary" @click="submitMsg">发送消息</el-button>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </section>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Phone, Message, Location } from '@element-plus/icons-vue'

/* 表单数据 */
const form = reactive({
  name: '',
  email: '',
  msg: ''
})

/* 提交留言 */
const submitMsg = () => {
  if (!form.name || !form.email || !form.msg) {
    ElMessage.warning('请完整填写信息')
    return
  }
  ElMessage.success('感谢您的留言，我们会尽快回复！')
  form.name = ''
  form.email = ''
  form.msg = ''
}

/* 动态网格背景 */
import { onMounted } from 'vue'
onMounted(() => {
  const canvas = document.getElementById('gridCanvas')
  const ctx = canvas.getContext('2d')
  let w = (canvas.width = window.innerWidth)
  let h = (canvas.height = window.innerHeight)
  const gridSize = 40
  let offset = 0

  function drawGrid() {
    ctx.clearRect(0, 0, w, h)
    ctx.strokeStyle = 'rgba(255,255,255,0.08)'
    ctx.lineWidth = 1
    for (let x = -offset; x < w; x += gridSize) {
      ctx.beginPath()
      ctx.moveTo(x, 0)
      ctx.lineTo(x, h)
      ctx.stroke()
    }
    for (let y = -offset; y < h; y += gridSize) {
      ctx.beginPath()
      ctx.moveTo(0, y)
      ctx.lineTo(w, y)
      ctx.stroke()
    }
    offset = (offset + 0.2) % gridSize
    requestAnimationFrame(drawGrid)
  }
  drawGrid()

  window.addEventListener('resize', () => {
    w = canvas.width = window.innerWidth
    h = canvas.height = window.innerHeight
  })
})
</script>

<style scoped>
/* ===== 背景层 ===== */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #42b883 0%, #2c3e50 100%);
}
#gridCanvas {
  display: block;
}

/* ===== 前景层 ===== */
.about-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 60px 20px;
  color: #fff;
}

/* 毛玻璃容器 */
.glass-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 标题 */
h2 {
  text-align: center;
  font-size: 40px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.subtitle {
  text-align: center;
  font-size: 18px;
  opacity: 0.85;
  margin-bottom: 50px;
}

/* 数据卡片 */
.data-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  transition: 0.3s;
}
.data-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.18);
}
.number {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
}
.label {
  font-size: 16px;
  opacity: 0.8;
  margin-top: 8px;
}

/* 浅色分割线 */
.divider-light {
  border-color: rgba(255, 255, 255, 0.2);
  margin: 50px 0;
}

/* 后续所有卡片统一毛玻璃 */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 30px;
  color: #fff;
}

/* 故事 */
.story {
  line-height: 1.8;
}
h3 {
  margin-bottom: 20px;
  font-size: 26px;
}

/* 价值观 */
.values {
  margin-top: 50px;
}
.value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.value-card .icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.value-card .title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.value-card .desc {
  font-size: 14px;
  opacity: 0.85;
}

/* 团队 */
.team {
  margin-top: 50px;
}
.member {
  text-align: center;
}
.member .name {
  font-size: 18px;
  font-weight: 600;
  margin-top: 12px;
}
.member .role {
  color: #42b883;
  margin: 4px 0 8px;
}
.member .intro {
  font-size: 14px;
  opacity: 0.85;
}

/* 时间线 */
.timeline {
  margin-top: 50px;
}
.tl-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.tl-content {
  font-size: 14px;
  opacity: 0.85;
}

/* 联系方式 */
.contact {
  margin-top: 50px;
}
.contact-card .way {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.feedback {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>
